<!-- src/components/sidebar/SidebarHeader.vue -->
<template>
  <el-header class="sidebar-header">
    <template v-if="isSidebarOpen">
      <img src="@/assets/newlogo.png" alt="Logo" class="logo" />
      <!-- <span class="title">JOURNEO</span> -->
      <span class="title"></span>
      <el-button class="toggle-button" @click="$emit('toggle')">
        收起
      </el-button>
    </template>
    <template v-else>
      <el-button class="toggle-button-mini" @click="$emit('toggle')">
        <el-icon><Expand /></el-icon>
      </el-button>
    </template>
  </el-header>
</template>

<script setup lang="ts">
import { Expand } from '@element-plus/icons-vue'

interface Props {
  isSidebarOpen: boolean
}

defineProps<Props>()
defineEmits(['toggle'])
</script>

<style scoped>
.sidebar-header {
  padding: 10px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  color:black
}

.toggle-button-mini {
  width: 100%;
  border: none;
  background: transparent;
  
  &:hover {
    background-color: #e4e7ed;
  }
}

.logo {
  height: 30px;
  margin-right: 10px;
}

.title {
  flex: 1;
  font-size: 16px;
}

.toggle-button {
  padding: 5px 10px;
}
</style>